{% extends "base.html" %}

{% block title %}智能图片定位{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="mb-0">
                    <i class="bi bi-robot me-2"></i>
                    智能图片定位系统
                </h2>
                <div class="btn-group">
                    <button class="btn btn-outline-secondary" onclick="location.href='/'">
                        <i class="bi bi-house me-1"></i>返回首页
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-4">
    <!-- 左侧控制面板 -->
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-gear me-2"></i>智能定位配置
                </h5>
            </div>
            <div class="card-body">
                <!-- 模板选择 -->
                <div class="mb-3">
                    <label class="form-label">选择PSD底板</label>
                    <select class="form-select" id="templateSelect">
                        <option value="">请选择底板...</option>
                        {% for template in templates %}
                        <option value="{{ template.id }}" 
                                data-width="{{ template.width }}" 
                                data-height="{{ template.height }}">
                            {{ template.name }} ({{ template.width }}×{{ template.height }})
                        </option>
                        {% endfor %}
                    </select>
                </div>
                
                <!-- JSON文件上传 -->
                <div class="mb-3">
                    <label class="form-label">上传定制JSON文件</label>
                    <input type="file" class="form-control" id="jsonFile" accept=".json">
                    <small class="text-muted">支持surfaces格式的JSON文件</small>
                </div>
                
                <!-- 分析按钮 -->
                <div class="mb-3">
                    <button class="btn btn-primary w-100" id="analyzeBtn" disabled>
                        <i class="bi bi-cpu me-1"></i>开始智能分析
                    </button>
                </div>
                
                <!-- 分析结果 -->
                <div id="analysisResult" style="display: none;">
                    <h6 class="text-muted mb-2">分析结果</h6>
                    <div id="analysisContent"></div>
                    
                    <!-- 批量上传入口 -->
                    <div id="batchUploadSection" style="display: none;">
                        <hr class="my-3">
                        <h6 class="text-muted mb-2">
                            <i class="bi bi-cloud-upload me-1"></i>批量上传定制图片
                        </h6>
                        <div class="mb-2">
                            <input type="file" class="form-control form-control-sm" 
                                   id="batchImageUpload" 
                                   accept=".png,.jpg,.jpeg,.gif,.webp"
                                   multiple>
                            <div class="form-text">
                                可同时选择多张图片进行批量上传，系统将自动匹配到对应的定制区域
                            </div>
                        </div>
                        <button class="btn btn-success btn-sm w-100" id="processBatchUpload" disabled>
                            <i class="bi bi-magic me-1"></i>智能批量匹配
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底板图层管理 - 已隐藏 -->
        {# 
        <div class="card mt-3" id="layerManagementCard" style="display: none;">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-layers me-2"></i>底板图层管理
                </h6>
            </div>
            <div class="card-body">
                <div id="templateLayers" style="max-height: 200px; overflow-y: auto;">
                    <div class="text-muted text-center py-3">
                        <i class="bi bi-layers"></i>
                        <div>等待加载图层...</div>
                    </div>
                </div>
                
                <div id="layerColorPanel" style="display: none;" class="mt-3 p-3 border rounded">
                    <h6 class="text-muted mb-2">
                        <i class="bi bi-palette me-1"></i>图层颜色调整
                    </h6>
                    <div id="selectedLayerInfo" class="mb-3">
                        <small class="text-muted">选中图层: </small>
                        <span id="selectedLayerName" class="fw-medium">无</span>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label small">图层颜色标识</label>
                        <div class="d-flex gap-2 align-items-center">
                            <input type="color" class="form-control form-control-color" 
                                   id="layerColorPicker" value="#ffffff" title="选择颜色">
                            <input type="text" class="form-control form-control-sm" 
                                   id="layerColorInput" placeholder="#ffffff" 
                                   style="width: 100px; font-family: monospace;" value="#ffffff">
                            <button class="btn btn-sm btn-outline-secondary" id="pickCurrentColor" title="取色器">
                                <i class="bi bi-eyedropper"></i>
                            </button>
                        </div>
                        <small class="text-info">💡 提示：颜色将显示在图层选项背景上，便于识别</small>
                    </div>
                    
                    <div class="d-flex gap-1">
                        <button class="btn btn-primary btn-sm flex-fill" id="applyColorChanges">
                            <i class="bi bi-check me-1"></i>设置标识色
                        </button>
                        <button class="btn btn-outline-secondary btn-sm flex-fill" id="resetLayerColor">
                            <i class="bi bi-arrow-clockwise me-1"></i>清除标识
                        </button>
                    </div>
                </div>
            </div>
        </div>
        #}
        
        <!-- 服装部位信息 -->
        <div class="card mt-3">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-diagram-3 me-2"></i>识别的服装部位
                </h6>
            </div>
            <div class="card-body">
                <div id="garmentParts" style="max-height: 200px; overflow-y: auto;">
                    <div class="text-muted text-center py-3">
                        <i class="bi bi-search"></i>
                        <div>等待分析...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 中间预览区域 -->
    <div class="col-lg-5">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="bi bi-eye me-2"></i>智能定位预览
                </h5>
                
                <!-- 图片操作控制器 -->
                <div class="btn-group" id="imageControlGroup" style="display: none;">
                    <button class="btn btn-sm btn-outline-secondary" id="rotateLeftBtn" title="逆时针旋转">
                        <i class="bi bi-arrow-counterclockwise"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-secondary" id="rotateRightBtn" title="顺时针旋转">
                        <i class="bi bi-arrow-clockwise"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-secondary" id="resetRotationBtn" title="重置旋转">
                        <i class="bi bi-arrow-repeat"></i>
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div id="previewContainer" class="preview-container">
                    <div id="previewPlaceholder" class="text-center py-5">
                        <i class="bi bi-image" style="font-size: 3rem; color: #dee2e6;"></i>
                        <h5 class="text-muted mt-3">选择底板并上传JSON文件</h5>
                        <p class="text-muted">系统将智能分析并预览定位结果</p>
                    </div>
                    
                    <div id="previewCanvas" style="display: none;">
                        <div class="position-relative">
                            <canvas id="intelligentCanvas" style="max-width: 100%; border: 1px solid #dee2e6; cursor: crosshair;"></canvas>
                            
                            <!-- 图片信息覆盖层 -->
                            <div id="imageInfoOverlay" class="position-absolute top-0 end-0 m-2" style="display: none;">
                                <div class="bg-dark bg-opacity-75 text-white px-2 py-1 rounded small">
                                    <div id="selectedImageInfo">
                                        <div>图片: <span id="selectedImageIndex">-</span></div>
                                        <div>旋转: <span id="selectedImageRotation">0°</span></div>
                                        <div>位置: <span id="selectedImagePosition">-</span></div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 旋转控制器（覆盖在画布上） -->
                            <div id="rotationControls" class="position-absolute bottom-0 start-50 translate-middle-x mb-2" style="display: none;">
                                <div class="btn-group shadow">
                                    <button class="btn btn-sm btn-light" id="rotateImage15Left" title="逆时针旋转15°">
                                        <i class="bi bi-arrow-counterclockwise"></i> 15°
                                    </button>
                                    <button class="btn btn-sm btn-light" id="rotateImage90Left" title="逆时针旋转90°">
                                        <i class="bi bi-arrow-counterclockwise"></i> 90°
                                    </button>
                                    <button class="btn btn-sm btn-primary" id="resetImageRotation" title="重置旋转">
                                        <i class="bi bi-arrow-repeat"></i>
                                    </button>
                                    <button class="btn btn-sm btn-light" id="rotateImage90Right" title="顺时针旋转90°">
                                        90° <i class="bi bi-arrow-clockwise"></i>
                                    </button>
                                    <button class="btn btn-sm btn-light" id="rotateImage15Right" title="顺时针旋转15°">
                                        15° <i class="bi bi-arrow-clockwise"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 右侧详细信息 -->
    <div class="col-lg-3">
        <!-- 图片列表 -->
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-images me-2"></i>检测到的图片
                </h6>
            </div>
            <div class="card-body">
                <div id="detectedImages">
                    <div class="text-muted text-center py-3">
                        <i class="bi bi-collection"></i>
                        <div>暂无图片</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 定位建议 -->
        <div class="card mt-3">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-lightbulb me-2"></i>智能建议
                </h6>
            </div>
            <div class="card-body">
                <div id="suggestions">
                    <div class="text-muted text-center py-3">
                        <i class="bi bi-magic"></i>
                        <div>等待分析...</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 区域切换控制 -->
        <div class="card mt-3" id="regionSwitchCard" style="display: none;">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-arrows-move me-2"></i>区域切换
                </h6>
            </div>
            <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                    <button class="btn btn-sm btn-outline-secondary" id="prevRegionBtn" disabled>
                        <i class="bi bi-chevron-left"></i>
                    </button>
                    <div class="flex-grow-1 text-center mx-2">
                        <span id="currentRegionInfo">区域 1 / 1</span>
                    </div>
                    <button class="btn btn-sm btn-outline-secondary" id="nextRegionBtn" disabled>
                        <i class="bi bi-chevron-right"></i>
                    </button>
                </div>
                
                <div id="currentRegionDetails" class="mb-3">
                    <div class="small text-muted">当前选择:</div>
                    <div id="currentRegionName" class="fw-medium">-</div>
                    <div id="currentRegionPosition" class="small text-muted">位置: -</div>
                </div>
                
                <div class="d-grid gap-1">
                    <button class="btn btn-primary btn-sm" id="highlightCurrentRegion">
                        <i class="bi bi-eye me-1"></i>高亮显示
                    </button>
                    <button class="btn btn-outline-warning btn-sm" id="replaceCurrentImage">
                        <i class="bi bi-image me-1"></i>替换图片
                    </button>
                    <button class="btn btn-outline-danger btn-sm" id="removeCurrentImage" disabled>
                        <i class="bi bi-trash me-1"></i>移除图片
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 操作按钮 -->
        <div class="card mt-3">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="bi bi-tools me-2"></i>操作
                </h6>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <button class="btn btn-success" id="saveIntelligentProject" disabled>
                        <i class="bi bi-save me-1"></i>保存智能项目
                    </button>
                    <div class="d-flex gap-2">
                        <select class="form-select form-select-sm" id="intelligentExportFormat" style="width: auto;">
                            <option value="png">PNG格式</option>
                            <option value="tif">TIF格式</option>
                            <option value="psd">PSD格式</option>
                            <option value="jpg">JPG格式</option>
                        </select>
                        <div class="form-check form-check-sm" id="intelligentPreserveLayersContainer" style="display: none;">
                            <input class="form-check-input" type="checkbox" id="intelligentPreserveLayers">
                            <label class="form-check-label" for="intelligentPreserveLayers">
                                保留图层
                            </label>
                        </div>
                    </div>
                    <button class="btn btn-outline-primary" id="exportIntelligentResult" disabled>
                        <i class="bi bi-download me-1"></i>导出结果
                    </button>
                    <button class="btn btn-outline-warning" id="adaptToRegions" disabled>
                        <i class="bi bi-bullseye me-1"></i>手动适配区域
                    </button>
                    <button class="btn btn-outline-secondary" id="resetAnalysis">
                        <i class="bi bi-arrow-clockwise me-1"></i>重新分析
                    </button>
                    <button class="btn btn-outline-info" id="testFeatures" style="display: none;">
                        <i class="bi bi-bug me-1"></i>测试功能
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.preview-container {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.garment-part-item {
    padding: 8px 12px;
    margin: 4px 0;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #f8f9fa;
}

.garment-part-item.detected {
    border-color: #28a745;
    background: #d4edda;
}

.image-item {
    padding: 10px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    margin-bottom: 10px;
}

.image-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
}

.confidence-badge {
    font-size: 0.75rem;
    padding: 2px 6px;
}

.suggestion-item {
    padding: 8px;
    border-left: 3px solid #007bff;
    background: #f8f9fa;
    margin-bottom: 8px;
    border-radius: 0 4px 4px 0;
}

.upload-entry.uploaded {
    background: #d4f6d4;
    border-color: #28a745;
}

.upload-entry.uploaded .badge {
    background-color: #28a745 !important;
}

#batchUploadSection {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #e9ecef;
}

#batchUploadSection h6 {
    color: #495057;
    font-weight: 600;
}

#batchImageUpload {
    border: 2px dashed #ced4da;
    background: white;
    transition: border-color 0.3s;
}

#batchImageUpload:hover {
    border-color: #28a745;
}

.file-name {
    font-size: 0.75rem;
    color: #6c757d;
}

#regionSwitchCard .card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom: none;
}

#regionSwitchCard .card-header h6 {
    color: white;
    margin: 0;
}

#currentRegionInfo {
    font-weight: 600;
    color: #495057;
    font-size: 0.9rem;
}

#currentRegionDetails {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 10px;
    border-left: 3px solid #667eea;
}

#currentRegionName {
    color: #495057;
    font-size: 1rem;
}

#prevRegionBtn:disabled,
#nextRegionBtn:disabled {
    opacity: 0.4;
}

.btn-sm {
    font-size: 0.8rem;
}

/* 图层管理样式 */
#layerManagementCard .card-header {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border-bottom: none;
}

#layerManagementCard .card-header h6 {
    color: white;
    margin: 0;
}

.layer-item {
    padding: 8px 12px;
    margin: 4px 0;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #f8f9fa;
    cursor: pointer;
    transition: all 0.2s;
}

.layer-item:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

.layer-item.selected {
    background: #d4edda;
    border-color: #28a745;
    font-weight: 600;
}

.layer-item.modified {
    border-left: 4px solid #ffc107;
    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3);
    transition: all 0.3s ease;
}

.layer-item.modified:hover {
    box-shadow: 0 4px 8px rgba(255, 193, 7, 0.4);
    transform: translateY(-1px);
}

#layerColorPanel {
    background: #f8f9fa;
    border: 2px solid #dee2e6;
}

#layerColorPanel h6 {
    color: #495057;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 8px;
}

.form-range {
    height: 6px;
}

.form-range::-webkit-slider-thumb {
    background: #007bff;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.form-control-color {
    width: 40px;
    height: 30px;
    padding: 2px;
    border: 1px solid #ced4da;
}

/* 画布和旋转控制器样式 */
#intelligentCanvas {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 4px;
}

#imageInfoOverlay {
    z-index: 10;
}

#rotationControls {
    z-index: 20;
    bottom: 10px !important;
}

#rotationControls .btn-group {
    border-radius: 20px;
    overflow: hidden;
}

#rotationControls .btn {
    border-radius: 0;
    font-size: 0.75rem;
    padding: 4px 8px;
}

#rotationControls .btn:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

#rotationControls .btn:last-child {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.preview-container {
    position: relative;
}

/* 图片选择高亮 */
.image-selected {
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.5);
    border-radius: 4px;
}
</style>

{% endblock %}

{% block extra_js %}
<!-- 智能定位系统的JavaScript -->
<script>
    // 检查jQuery是否加载
    if (typeof $ === 'undefined') {
        console.error('jQuery未加载！');
        alert('jQuery未加载，请刷新页面或检查网络连接');
    } else {
        console.log('✅ jQuery加载正常，版本:', $.fn.jquery);
    }
    
    // 检查工具类
    if (typeof APP_UTILS === 'undefined' || typeof APP_AJAX === 'undefined') {
        console.error('工具类未加载！');
        alert('工具类未加载，请刷新页面');
    } else {
        console.log('✅ 工具类加载正常');
    }
</script>
<script src="{{ url_for('static', filename='js/intelligent_positioning.js') }}"></script>
{% endblock %}
